<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="live-demo-wrap">
    <h2>Button</h2>
    <div class="clearfix">
        <div class="demo-1 live-demo live-demo-block">
            <h3>用法</h3>
            <j-button colorType="primary">普通用法</j-button>
            <a jigsaw-button colorType="primary">使用 a 标签</a>
            <button jigsaw-button colorType="primary">使用 button 标签</button>
        </div>

        <div class="demo-2 live-demo live-demo-block">
            <h3>类型</h3>
            <p class="comment">四种类型：<code>default</code> <code>primary</code> <code>warning</code>
                <code>error|danger</code></p>
            <j-button>Default</j-button>
            <j-button colorType="primary">Primary</j-button>
            <j-button colorType="warning">Warning</j-button>
            <j-button colorType="danger">Danger</j-button>
        </div>
    </div>

    <div class="clearfix">
        <div class="demo-3 live-demo live-demo-block">
            <h3>尺寸</h3>
            <p class="comment">三种尺寸：<code>small</code> <code>default</code> <code>large</code></p>
            <j-button preSize="small" colorType="primary">Small</j-button>
            <j-button preSize="default" colorType="primary">Default</j-button>
            <j-button preSize="large" colorType="primary">Large</j-button>
        </div>

        <div class="demo-4 live-demo live-demo-block">
            <h3>设置宽高</h3>
            <p class="comment">宽高支持 <code>number</code> <code>px</code> <code>%</code></p>
            <j-button width="150px" height="40">click me</j-button>
            <j-button width="20%">click me</j-button>
        </div>
    </div>

    <div class="clearfix">
        <div class="demo-5 live-demo live-demo-block">
            <h3>绑定click事件</h3>
            <j-button (click)="canClick()">click me</j-button>
        </div>

        <div class="demo-6 live-demo live-demo-block">
            <h3>不可点击状态</h3>
            <j-button [(disabled)]="disabled" (click)="changeClickCount()">click me</j-button>
            <j-checkbox [(checked)]="disabled">disable/enable</j-checkbox>
            <p class="message">点击次数<span>{{clickCount}}</span></p>
        </div>
    </div>

    <div class="clearfix">
        <div class="demo-7 live-demo live-demo-block">
            <h3>内嵌图标</h3>
            <j-button>
                <span class="fa fa-area-chart"></span>
                <span>确定</span>
            </j-button>
            <j-button (click)="onClick()" colorType="primary">
                <j-font-loading *ngIf="isLoading" width="16px" height="16px" color="white"></j-font-loading>
                <span>{{label}}</span>
            </j-button>
        </div>
    </div>
</div>
